<template>
  <span>
    <el-tooltip effect="dark" content="复制" placement="top" :hide-after="100"
      ><el-button @click="copyField(scope.row)" icon="DocumentCopy" size="small" type="primary"
    /></el-tooltip>
    <el-tooltip effect="dark" content="删除" placement="top" :hide-after="100"
      ><el-button @click="delField(scope.row)" icon="DeleteFilled" size="small" type="danger"
    /></el-tooltip>
    <el-tooltip effect="dark" content="向上移动(双击移动到顶部)" placement="left" :hide-after="100">
      <span
        ><el-button
          v-if="isTop(scope.row)"
          style="width: 10px; height: 10px; margin-left: 10px"
          icon="ArrowUpBold"
          @click="move('top', scope)"
          @dblclick="move('topMost', scope)"
          circle /></span
    ></el-tooltip>
    <el-tooltip
      effect="dark"
      content="向下移动(双击移动到底部)"
      placement="right"
      :hide-after="100"
    >
      <span>
        <el-button
          v-if="isLast(scope.row)"
          style="width: 10px; height: 10px; margin-left: 10px"
          icon="ArrowDownBold"
          @click="move('bottom', scope)"
          @dblclick="move('bottomMost', scope)"
          circle
        />
      </span>
    </el-tooltip>
  </span>
</template>
<script setup>
// 字段配置列表
const props = defineProps(['scope'])
const jsonArr = defineModel({ default: [] })
function copyField(field) {
  let copyField = JSON.parse(JSON.stringify(field))
  // 获取最大id
  let maxId = 1
  jsonArr.value.forEach((element) => {
    if (element.id > maxId) {
      maxId = element.id
    }
  })
  const newId = maxId + 1
  if (copyField.gridField) {
    copyField.gridField = null
  }
  jsonArr.value.push({
    ...copyField,
    id: newId
  })
}

function delField(data) {
  jsonArr.value = jsonArr.value.filter((item) => item.id != data.id)
}

// 是否第一个元素
function isTop(row) {
  return jsonArr.value[0].id !== row.id
}
function isLast(row) {
  return jsonArr.value.slice(-1)[0].id !== row.id
}
// 移动
function move(type, row) {
  let element = jsonArr.value.splice(row.$index, 1)[0]
  if (type === 'top') {
    jsonArr.value.splice(row.$index - 1, 0, element)
  } else if (type === 'bottom') {
    jsonArr.value.splice(row.$index + 1, 0, element)
  } else if (type === 'topMost') {
    jsonArr.value.unshift(element)
  } else {
    jsonArr.value.push(element)
  }
}
</script>
<style scoped></style>
